<template>
  <div class="total">
    <el-card shadow="hover" :body-style="{ padding: '0px 40px ' }">
      <div slot="header">
        <h2>数据概览</h2>
      </div>
      <el-row class="btom">
        <el-col :span="4"><div class="allOrder">全部订单</div></el-col>
        <el-col :span="6"
          >总销量 <span class="redText">{{ allOrder.counts }}</span>
          <span class="small">件</span></el-col
        >
        <el-col :span="7"
          >总销售额 <span class="redText">{{ allOrder.sumPrice }}</span>
          <span class="small">元</span></el-col
        >
        <el-col :span="7"
          >总付费用户数 <span class="redText">{{ allOrder.users }}</span>
          <span class="small">人</span></el-col
        >
      </el-row>
      <el-row class="btom visi">
        <el-col :span="4"><div class="allOrder">有效订单</div></el-col>
        <el-col :span="6"
          >总销量 <span class="redText blue">{{ usefulOrder.counts }}</span>
          <span class="small">件</span></el-col
        >
        <el-col :span="7"
          >总销售额
          <span class="redText blue">{{ usefulOrder.sumPrice }}</span>
          <span class="small">元</span></el-col
        >
        <el-col :span="7"
          >总付费用户数
          <span class="redText blue">{{ usefulOrder.users }}</span>
          <span class="small">人</span></el-col
        >
      </el-row>
    </el-card>
    <el-card class="tab" shadow="hover" :body-style="{ padding: '20px 40px ' }">
      <span
        v-for="(item, index) in tabList"
        :key="index"
        @click="changeTab(index)"
        :class="{ selected: current == index }"
        >{{ item }}</span
      >
    </el-card>

    <el-card class="echartBox" shadow="hover" :body-style="{ padding: '0 20px 10px 20px' }">
      <!-- card body -->
      <div id="main"></div>
    </el-card>
  </div>
</template>

<script>
// 基于准备好的dom，初始化echarts实例
var echarts = require("echarts");
import dashApi from "@/api/lejv/dashboard";
export default {
  name: "Dashboard",
  data() {
    return {
      allOrder: {
        counts: "",
        sumPrice: "",
        users: "",
      },
      usefulOrder: {
        counts: "",
        sumPrice: "",
        users: "",
      },
      current: 0,
      invalidSales: [],
      invalidOrderTime: [],
      invalidCounts: [],
      totalSales: [],
      totalOrderTime: [],
      totalCounts: [],
      totalUsers: [],
      dataTotal: [],
      dataInvalid: [],
      tabList: ["每日销量", "每日销售额", "每日付费用户数"],
    };
  },
  created() {},
  computed: {},
  mounted() {
    this.getList();
  },
  methods: {
    async getList() {
      await dashApi.getDashboard().then(res=>{
        // this.info = res.data
        // console.log(res);
        this.allOrder = res.data.upper;
        this.allOrder.sumPrice = this.allOrder.sumPrice / 100;
        this.usefulOrder = res.data.below;
        this.usefulOrder.sumPrice = this.usefulOrder.sumPrice / 100;
        for (let i = 0; i < res.data.invalid.length; i++) {
          this.invalidSales.push(res.data.invalid[i].sales / 100);
          this.invalidOrderTime.push(res.data.invalid[i].orderTime);
          this.invalidCounts.push(res.data.invalid[i].counts);
        }
        for (let j = 0; j < res.data.total.length; j++) {
          this.totalSales.push(res.data.total[j].sales / 100);
          this.totalOrderTime.push(res.data.total[j].orderTime);
          this.totalCounts.push(res.data.total[j].counts);
          this.totalUsers.push(res.data.total[j].users);
        }
      });
      this.init();
    },
    //tab栏切换
    changeTab(val) {
      this.current = val;
      this.init();
    },
    //初始化echarts
    init() {
      let myChart = echarts.init(document.getElementById("main"));
      let dataAxis = [];
      if (this.current == 0) {
        dataAxis = this.totalOrderTime;
        this.dataTotal = this.totalCounts;
        this.dataInvalid = this.invalidCounts;
      } else if (this.current == 1) {
        dataAxis = this.totalOrderTime;
        this.dataTotal = this.totalSales;
        this.dataInvalid = this.invalidSales;
      } else {
        dataAxis = this.totalOrderTime;
        this.dataTotal = this.totalUsers;
        // this.dataInvalid = this.invalidSales
      }
      let dataTotal = this.dataTotal;
      let dataInvalid = this.dataInvalid;
      let that = this;
      myChart.setOption({
        tooltip: {
          trigger: "axis",
          //设置鼠标悬浮显示的内容
          formatter: function (data) {
            // console.log(data,that.current)
            let infos = "";
            if (that.current == 0) {
              infos = "每日销量";
            } else if (that.current == 1) {
              infos = "每日销售额";
            } else {
              infos = "每日付费用户数";
            }
            if (data.length > 1) {
              return (
                data[0].name +
                "</br>" +
                infos +
                "(" +
                data[0].seriesName +
                ")" +
                ":" +
                data[0].data +
                "</br>" +
                infos +
                "(" +
                data[1].seriesName +
                ")" +
                ":" +
                data[1].data
              );
            } else {
              return (
                data[0].name +
                "</br>" +
                infos +
                "(" +
                data[0].seriesName +
                ")" +
                ":" +
                data[0].data
              );
            }
          },
        },
        legend: {
          data: ["总量", "无效"],
          orient: "vertical",
          x: "right", //可设定图例在左、右、居中
          y: "center", //可设定图例在上、下、居中
          // align:"left",
          selected: {
            // 选中
            总量: true,
            无效: false,
          },
          textStyle: {
            fontSize: 16,
            // color : "#21E313"
          },
          // inactiveColor : '#FF7F27'
        },
        grid: {
          left: "3%",
          right: "12%",
          bottom: "3%",
          containLabel: true,
        },
        xAxis: {
          data: dataAxis,
          type: "category",
          boundaryGap: false,
          axisLabel: {
            rotate: 45,
          },
        },
        yAxis: {
          type: "value",
        },
        dataZoom: [
          {
            type: "inside",//滚动放大
          },
        ],
        series: [
          {
            name: "总量",
            type: "line",
            // stack: '总量',
            symbol: "circle", //折线点设置为实心点
            symbolSize: 12, //折线点的大小
            itemStyle: {
              normal: {
                color: "#1bdaf8", //折线点的颜色
                lineStyle: {
                  color: "#0d427e", //折线的颜色
                },
              },
            },
            data: dataTotal,
            connectNulls:true
          },
          {
            name: "无效",
            type: "line",
            // stack: '总量',
            symbolSize: 12,
            data: dataInvalid,
            connectNulls:true
          },
        ],
      });
      //切换到每日付费用户数 隐藏右侧切换按钮
      if (this.current == 2) {
        myChart.setOption({
          legend: {
            show: false,
          },
        });
      } else {
        myChart.setOption({
          legend: {
            show: true,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.echartBox{
  width: 100%;
}
#main {
  width: 95%;
  height: 400px;
  margin: 0 0 10px 0;
  canvas {
    width: 90%;
  }
}
.total {
  padding: 30px;
  .tab {
    margin: 40px 0 10px 0;
    height: 62px;
    :nth-child(2) {
      margin: 0 25px;
    }
    span {
      cursor: pointer;
      padding: 18px;
    }
    .selected {
      color: #f59a23;
      border-bottom: 2px solid #f59a23;
      transition: all 0.2s ease-out;
      font-size: 18px;
    }
  }
  h2 {
    margin: 0;
  }
  .el-card {
    background-color: #f2f2f2;
  }
  .btom {
    margin-bottom: 20px;
    .el-col {
      line-height: 30px;
    }
    .allOrder {
      font-weight: bold;
      background-color: #f59a23;
      width: 80px;
      text-align: center;
    }
    .redText {
      display: inline-block;
      margin-left: 8px;
      font-size: 24px;
      color: #f59a23;
    }
    .blue {
      color: #02a7f0;
    }
    .small {
      // position: absolute;
      font-size: 14px;
      // top: 10px;
      margin-left: 3px;
    }
  }
  .visi {
    .allOrder {
      background-color: #02a7f0;
    }
  }
}
</style>
